<template>
    <div id="zxYewu">
        <div class="heightChart">
            <div class="title">来电分析</div>
            <div id="main1"></div>
        </div>

    </div>
</template>

<script>
    import echarts from 'echarts'
    import {getAnswer} from "../../../network/home";
    export default {
        name: "zxYewu",
        data() {
            return {
                timer:null
            }
        },
        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('左下关闭')
            }
        },
        methods: {
            setEchart() {
                getAnswer().then(res => {
                    if(res.code=='200'){
                        // console.log(res.data)
                        var sumDatas = []
                        var indexList = []
                        var nameDatas = []

                        for(var i=0;i<res.data.value.length;i++){
                            // 取出有值的数据
                            if(res.data.value[i]!==0){
                                sumDatas.push(res.data.value[i])
                            }
                            // 取出有值的数据的索引集合
                            if(res.data.value[i]!==0){
                                // console.log(i)
                                indexList.push(i)
                            }
                        }

                        // 循环取出有值索引对应的名称
                        for(var n=0;n<indexList.length;n++){
                            for(var tmp in res.data.name){
                                if(indexList[n] == tmp){
                                    // console.log(res.data.name[tmp])
                                    nameDatas.push(res.data.name[tmp])
                                }
                            }
                        }

                        let myChart = echarts.init(document.getElementById("main1"));
                        var myColor = [
                            '#9845D5',
                            '#EB305B',
                            '#6AEEC9',
                            '#BFA616',
                            '#02C0DA',
                            '#4EB05D',
                            '#33CC33'
                        ];
                        myChart.setOption({
                            grid: {
                                top: '4%',
                                left: '22%',
                                bottom: '6%',
                                width: "55%", // 宽度
                            },
                            xAxis: [{
                                show: false,
                            }],
                            yAxis: [{
                                axisLine: 'none',
                                offset: '10',
                                axisLabel: {
                                    textStyle: {
                                        color: '#0AEDFF',
                                        fontSize: '18',
                                    }
                                },
                                data:nameDatas // #################################
                            },
                                {
                                    axisLine: 'none',
                                    type: 'category',
                                    axisLabel: {
                                        margin: 10, //right的 距离
                                        formatter: function (value) {
                                            if (value.includes('%')) {
                                                return '{a|' + value + '}'
                                            } else {
                                                return '{b|' + value + '}'
                                            }
                                        },
                                        rich: {
                                            a: {
                                                color: '#03CEDD'
                                            },
                                            b: {
                                                color: '#0AEDFF',
                                                fontSize:18
                                            }
                                        },
                                        textStyle: {
                                            fontSize: '16',
                                        }
                                    },
                                    data: sumDatas,// #################################
                                },
                            ],
                            series: [{
                                name: '', // blue bar
                                type: 'bar',
                                barWidth: 16,
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            var num = myColor.length;
                                            return myColor[params.dataIndex]
                                        },
                                    },
                                },
                                data: sumDatas,// #################################
                                label: {
                                    normal: {
                                        show: false,
                                    }
                                },
                                animationEasing: 'elasticOut',
                            }]
                        })

                    }
                });


            }
        }
    }
</script>

<style scoped>
    .heightChart {
        width: 610px;
        height: 300px;
        background: url("../../../assets/img/worktake/bottom.png");
        background-size: 610px 300px;
        position: relative;
    }

    .title {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 22px;
        color: #0FC40A;
    }

    #main1 {
        width: 100%;
        height: 300px;
        box-sizing: border-box;
        padding: 60px 0px 20px 40px;
    }

</style>
